<template>
	<view class="content">
		<view class="app-title ac">
			<view class="fl" @click="back">
				<image class="back" src="/static/img/back.png"></image>
			</view>我的待办
		</view>

		<view class="my-work ac">
			<view v-for="(item, index) in tabList" :key="index" class="fl menu ac">
				<view :class="{ on: tab == index }" @click="setTab(index)"><b>{{ item }}</b></view>
				<view v-show="tab == index" class="num ac">{{
          countList[index] > 99 ? "99+" : countList[index] 
        }}</view>
			</view>
			<!-- <view class="fl menu ac" @click="show_search = true">
        <view
          >筛选<image class="select" src="/static/img/select.png"></image>
        </view>
      </view> -->
			<view class="clearfix"></view>
		</view>

		<view class="fault-list">
			<view class="fault-list-title">
				<text>问题编号</text>
				<text>当前环节</text>
				<text>创建部门</text>
			</view>
			<view v-for="(item, index) in list" :key="index" class="fault-item" @click="goFaultDetail(item)">
				<view></view>
				<view>{{ item.code }}</view>
				<view>{{ item.taskName }}</view>
				<view>{{ item.orgName }}</view>
			</view>
			<!-- <button type="default">领取</button> -->
		</view>

		<HandleSearch v-show="show_search" :type="tab" @closeFull="closeFull"></HandleSearch>
	</view>
</template>

<script>
	import HandleSearch from "../../components/faultClosedLoop/toHandleSearch";
	export default {
		components: {
			HandleSearch,
		},
		data() {
			return {
				tab: 0,
				tabList: ["全部", "待领取", "已领取"],
				list: [],
				search: {
					processDefinitionKey: "Malfunction_Process_New",
					type: 0,
					pageSize: 15,
					pageNo: 1,
				},
				countList: [0, 0, 0],
				show_search: false,
				flog: true,
			};
		},
		onShow: function() {
			console.log("salkidew");
			this.getAllCount();
			this.initList();
		},
		created() {
			this.getAllCount();
			this.initList();
		},
		onBackPress(e) {
			uni.switchTab({
				url: "/pages/index/index",
			});
		},
		onReachBottom() {
			if (!this.flog)
				return uni.showToast({
					title: "已无最新数据",
					icon: "none",
				});
			this.search.pageNo++;
			this.initList();
		},
		methods: {
			back() {
				uni.navigateTo({
					url: "/pages/index/index",
				});
			},
			setTab(i) {
				if (this.tab == i) return;
				this.tab = i;
				this.search.pageNo = 1;
				this.list = [];
				this.getAllCount();
				this.initList();
			},
			closeFull(obj) {
				if (obj) {
					this.search = {
						processDefinitionKey: obj.processDefinitionKey,
						type: this.tab,
						pageSize: 10000,
						pageNo: 1,
					};
					this.flog = true;
					this.list = [];
					this.getAllCount();
					this.initList();
				}
				this.show_search = false;
			},
			getAllCount() {
				let params = {
					processDefinitionKey: this.search.processDefinitionKey,
				};
				this.fetch(
					"GET",
					this.$store.state.baseFaultUrl + "/task/findTaskToDoNum",
					params,
					false,
					this.$store.state.faultCLHeader
				).then((res) => {
					if (res.success) {
						this.countList = res.data.map((item) => item.value);
					}
				});
			},
			initList() {
				this.search.type = this.tab;
				this.fetch(
					"GET",
					this.$store.state.baseFaultUrl + "/task/findTodoTasks",
					this.search,
					true,
					this.$store.state.faultCLHeader
				).then((res) => {
					if (res.success) {
						if (this.search.pageNo >= res.data.totalPage) {
							this.flog = false;
						}

						// for (let i = 0; i < 15; i++)
						this.list = res.data.rows;
						// this.list.concat(res.data.rows);
					}
				});
			},
			claimTask(taskId) {
				this.fetch(
					"POST",
					this.$store.state.baseFaultUrl + "/workFlow/task/claimTask", {
						actTaskId: taskId,
					},
					false,
					this.$store.state.faultCLHeader
				).then((res) => {
					if (res.success) {
						// uni.showToast({
						// 	title: '领取成功',
						// 	icon: 'none'
						// });
					} else {
						// uni.showToast({
						// 	title: res.message,
						// 	icon: 'none'
						// });
					}
				});
			},
			unclaimTask(taskId) {
				this.fetch(
					"POST",
					this.$store.state.baseFaultUrl + "/workFlow/task/unclaimTask", {
						actTaskId: taskId,
					},
					false,
					this.$store.state.faultCLHeader
				).then((res) => {
					if (res.success) {
						uni.showToast({
							title: "取消领取成功",
							icon: "none",
						});
					} else {
						uni.showToast({
							title: res.message,
							icon: "none",
						});
					}
				});
			},

			goFaultDetail(item) {
				if (!item.taskAssignName) {
					this.claimTask(item.taskId); //进入详情页面时自动领取
				}

				let params = {
					id: item.id,
					taskId: item.taskId,
					processInstanceId: item.processInstanceId,
					woId: item.woId,
					taskName: item.taskName,
				};
				uni.navigateTo({
					url: "/pages/faultClosedLoop/faultDetail" +
						"?params=" +
						JSON.stringify(params),
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.my-work {
		background: #fff;
		margin-bottom: 16px;
		box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.05);
	}

	.my-work>.menu {
		width: 33%;
		color: #3e3a39;
		line-height: 54px;
		position: relative;
	}

	.my-work>.menu:nth-child(4) {
		border-left: 1px solid #d7d7d7;
		width: 28%;
	}

	.my-work>.menu view {
		display: inline-block;
	}

	.my-work>.menu>.on {
		color: #307be0;
		border-bottom: 2px solid #307be0;
	}

	.my-work>.menu>.num {
		position: absolute;
		top: 10px;
		right: 15%;
		background: #fa5151;
		width: 15px;
		height: 15px;
		font-size: 10px;
		border-radius: 50%;
		color: #fff;
		line-height: 14px;
	}

	.select {
		width: 17px;
		height: 17px;
		margin-left: 5px;
		margin-bottom: 4px;
		vertical-align: middle;
	}

	.fault-list {
		width: 91.5%;
		margin: 0 auto;
		background: #ffffff;
		box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.05), 2px 2px 4px rgba(0, 0, 0, 0.05);
		border-radius: 6px;
		// padding: 0 16px 16px 16px;
		padding-bottom: 16px;
		font-size: 14px;
		margin-bottom: 16px;
		color: #3e3a39;

		.fault-list-title {
			height: 48px;
			background-color: #f1f1f1;
			// box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.05), 2px 2px 4px rgba(0, 0, 0, 0.05);
			border-radius: 6px 6px 0 0;

			text {
				text-align: center;
				line-height: 48px;
				font-size: 14px;
				font-weight: bold;
				color: black;
			}

			text:nth-of-type(1) {
				margin-left: 66rpx;
			}

			text:nth-of-type(2) {
				margin-left: 182rpx;
				margin-right: 46rpx;
			}
		}

		.fault-item {
			height: 46px;
			line-height: 46px;
			color: black;
			border-bottom: 1px solid #e0eefb;
			overflow: hidden;

			view {
				float: left;
			}

			view:nth-of-type(1) {
				width: 11px;
				height: 11px;
				border-radius: 50%;
				background-color: #7bba81;
				// background-color: #dc9c30;
				margin: 17px 9px 0 14px;
			}

			view:nth-of-type(2) {
				width: 320rpx;
			}

			view:nth-of-type(3) {
				width: 150rpx;
			}

			view:nth-of-type(4) {
				width: 140rpx;
			}
		}

		button {
			font-size: 14px;
			font-weight: bold;
			background: #fff;
			width: 78px;
			height: 30px;
			line-height: 30px;
			// border: 1px solid #8cd0ff;
			border: 1px solid #6bbaff;
			margin: 10px auto;
			color: black;
		}
	}

	.work-item {
		width: 91.5%;
		margin: 0 auto;
	}

	.work-item>.item {
		background: #ffffff;
		box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.05), 2px 2px 4px rgba(0, 0, 0, 0.05);
		border-radius: 6px;
		padding: 0 16px 16px 16px;
		font-size: 14px;
		margin-bottom: 16px;
		color: #3e3a39;
		position: relative;
	}

	.work-item>.item>.name {
		margin-bottom: 10px;
		line-height: 48px;
		border-bottom: 1px solid #f1f1f1;
	}

	.work-item>.item>view:nth-child(2) {
		margin-bottom: 6px;
	}

	.work-item>.item>.item-status {
		position: absolute;
		width: 60px;
		height: 60px;
		right: 0;
		bottom: 6px;
	}

	.push {
		width: 60px;
		line-height: 26px;
		border-radius: 6px;
	}

	.work-item>.item>.name>.fr {
		display: inline-flex;
		align-items: center;
		height: 48px;
	}

	.f-opactiy {
		display: inline-block;
	}
</style>